<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style>
		*{margin:0;padding:0;list-style: none}

		ul{
			width:25%;
			/*height:2000px;*/
			border:1px solid red;
			float:left;
			box-sizing: border-box;
		}
		ul li{
			width:90%;
			height:350px;
			border:1px solid green;
			margin: 0 auto;
			text-align:center;
		}
	</style>
</head>
<body>
	<li style="display:none">
		<img src="./images/05bb0203db64c3cfea040ffb05e2e73c.jpg" alt="" height=293>
		<h3>商品信息</h3>
		<p>商品价格</p>
	</li>
	<ul>
		
	</ul>
	<ul></ul>
	<ul></ul>
	<ul></ul>
	<script>
		// 页数
		var p=1;
		// 页面加载完先执行一次ajax操作
		RequestData();

		// 添加滚动事件
		$(window).scroll(function(){
			// 判断滚动条是否触底 当前文档的高度=文档偏移位置+窗口的高度
			// 获取文档的高度
			var Dh=$(document).height();
			// 当前文档的偏移位置
			var Fh=$(document).scrollTop();
			// 窗口的高度
			var Wh=$(window).height();

			if(Dh==Fh+Wh){
				// 触底 在此请求数据
				RequestData();
			}

		})

		function RequestData(){
			// 页面一进来就发送ajax请求
			$.get('./cgi-bin/goods.py',{P:p},function(data){
				// console.log(data);
				// 遍历拿到的数据
				for(i in data){
					// 克隆li元素
					var el=$('li:first').clone();

					el.find('img').attr('src',data[i].pic);
					el.find('h3').html(data[i].id+data[i].title);
					el.find('p').html('价格:'+data[i].price);
					// 设置克隆元素的显示
					el.css('display','block');
					// 添加元素
					// 0123 4567 8 9 10 11 
					// 对4取余
					var ind=i%4;
					$('ul').eq(ind).append(el);
				}
			},'json');
			p++;
		}
		
	</script>
</body>
</html>